import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import { DNavBar, DLookImages } from '@/components'
import http from '@/api'
import './quotedetail.scss'
import sdk from '@/common/sdk'
const itembg = require('../assets/pic@2x.png')
const icon_chat = require('../assets/icon_chat.png')
const icon_phone = require('../assets/icon_phone.png')
export default class QuotedetailBox extends Component {

    constructor(props) {
        super(props)
        this.state = {
            quotedetailInfo: {},
            companycar: {
                itemStatus: false,
                itemUrl: ''
            },
            self: '1'
        }
    }

    componentWillMount() {
        const { id = '', self = '1' } = this.$router.params
        this.httpQuotedDetail(id)
        this.setState({
            self
        })
    }

    onInfoHandle() {
        if (window.bridge) {
            const { quotedetailInfo } = this.state
            // window.bridge.callHandler('IMChat', { 'tephone': quotedetailInfo.creatorContact }, function responseCallback(res) { })
            sdk.setWechatInfo(quotedetailInfo.creatorContact, 4, quotedetailInfo.entName)
        }
    }

    httpQuotedDetail = id =>
        http.getQuotedDetail({ id }).then(res => {
            if (!res) {
                return
            }
            this.setState({ quotedetailInfo: res })
        })

    submitOrder = () => {
        const { id } = this.$router.params
        const { quotedetailInfo } = this.state
        Taro.navigateTo({
            url: `/pages/transportorder/transportorder?qpId=${id}&creator=${quotedetailInfo.creator}&creatorId=${quotedetailInfo.creatorId}`
        })
    }

    onTelphoneHandle() {
        if (window.bridge) {
            const { quotedetailInfo } = this.state
            window.bridge.callHandler('call', { 'tephone': quotedetailInfo.creatorContact }, function responseCallback(res) { })
        }
    }

    onLookHandle(url, i, arr) {
        if (window.bridge) {
            let _images = []
            arr.map(item => {
                _images.push(item.fileUrl)
            })
            window.bridge.callHandler('previewPhoto', { "index": i, "images": _images }, function responseCallback() { })
        } else {
            this.setState({
                companycar: {
                    ...this.state.companycar,
                    itemStatus: true,
                    itemUrl: url
                }
            })
        }
    }

    onLookItem() {
        this.setState({
            companycar: {
                ...this.state.companycar,
                itemStatus: false,
                itemUrl: ''
            }
        })
    }
    getType(type) {
        return {
            $1: '车辆照片',
            $2: '车辆行驶证',
            $3: '车辆保险',
        }[`$${type}`]
    }
    render() {

        const { quotedetailInfo, companycar, self } = this.state

        return (
            <View className='b_quotedetail'>
                <DNavBar title='报价详情'></DNavBar>
                <View className='b_quotedetail__box'>
                    <View className="b_quotedetail__info">
                        <View className="item_title">
                            <Text className="item_title__left">承运公司</Text>
                            <Text className="item_title__right">{quotedetailInfo.entName || '---'}</Text>
                        </View>
                        <View className="item_title">
                            <Text className="item_title__left">联系人</Text>
                            <Text className="item_title__right">{quotedetailInfo.creator || '---'}</Text>
                        </View>
                        <View className="item_title">
                            <Text className="item_title__left">联系方式</Text>
                            <Text className="item_title__right">{quotedetailInfo.creatorContact || '---'}</Text>
                        </View>
                        <View className="item_title">
                            <Text className="item_title__left">报价价格</Text>
                            <Text className="item_title__right">{quotedetailInfo.tqPrice || '---'}元</Text>
                        </View>
                        <View className="item_title">
                            <Text className="item_title__left">备注</Text>
                            <Text className="item_title__right">{quotedetailInfo.tqRemark || '(空)'}</Text>
                        </View>
                    </View>
                    <View className="b_quotedetail__info">
                        <Text className="b_quotedetail__info_title">运输车辆信息</Text>
                        <View className="item_title">
                            <Text className="item_title__left">车辆名称</Text>
                            <Text className="item_title__right">{quotedetailInfo.refCiName || '---'}</Text>
                        </View>
                        <View className="item_title">
                            <Text className="item_title__left">车辆号码</Text>
                            <Text className="item_title__right">{quotedetailInfo.ciNo || '---'}</Text>
                        </View>
                        <View className="item_title">
                            <Text className="item_title__left">车辆年龄</Text>
                            <Text className="item_title__right">{quotedetailInfo.ciAge || '---'}</Text>
                        </View>
                        <View className="item_title">
                            <Text className="item_title__left">司机姓名</Text>
                            <Text className="item_title__right">{quotedetailInfo.drName || '---'}</Text>
                        </View>
                    </View>
                    <View className="b_quotedetail__images">
                        <Text className="b_quotedetail__info_title">资料图片</Text>
                        <View className='b_quotedetail__images_item'>

                            {
                                quotedetailInfo.carImages && quotedetailInfo.carImages.map((item, i) => {
                                    return <View className="item_file_box">
                                        {
                                            item && item.fileUrl &&
                                            <View>
                                                <Image src={item.fileUrl} className='item_image' onClick={this.onLookHandle.bind(this, item.fileUrl, i, quotedetailInfo.carImages)}></Image>
                                            </View>
                                        }
                                        <View className="item_file_name">{this.getType(item.fileType)}</View>
                                    </View>
                                })
                            }
                            {
                                quotedetailInfo.driverImages && quotedetailInfo.driverImages.map((item, i) => {
                                    return <View className="item_file_box">
                                        {
                                            item && item.fileUrl &&
                                            <Image src={item.fileUrl} className='item_image' onClick={this.onLookHandle.bind(this, item.fileUrl, i, quotedetailInfo.driverImages)}></Image>
                                        }
                                        <View className="item_file_name">驾驶证</View>
                                    </View>
                                })
                            }
                        </View>
                    </View>
                </View>
                 {self === '1' &&
                    <View className='b_quotedetail__footer'>
                        <View className='b_quotedetail__footer_left'>
                            {
                              false && <View className='b_quotedetail__footer_item' onClick={this.onInfoHandle.bind(this)}>
                                <Image src={icon_chat} className='b_quotedetail__footer_item_image'></Image>
                                <Text>私信</Text>
                            </View>
                            }
                            <View className='b_quotedetail__footer_item' onClick={this.onTelphoneHandle.bind(this)}>
                                <Image src={icon_phone} className='b_quotedetail__footer_item_image'></Image>
                                <Text>电话</Text>
                            </View>
                        </View>
                        <View className='b_quotedetail__footer_right' onClick={this.submitOrder}>
                            <Text>发起订单</Text>
                        </View>
                    </View>
                }
                <DLookImages status={companycar.itemStatus} url={companycar.itemUrl} onLookHandle={this.onLookItem.bind(this)}></DLookImages>
            </View>
        )
    }
}
